/*
  state 状态 react 组件数据交互的载体  状态用来修改的 

  1. state 不能在组件外部定义  不能在组件外部 修改  只能在组件内部定义声明 只能在内部修改 
  2. state 用来被修改的  this.state 获取 state, this.setState() 来修改 state 
  3. state 在组件内部的 getInitialState(15版本 已经被废弃) 来初始化定义 state ,必须返回一个对象 
  4. state 修改 setState 这个方法会修改 state 会重新执行 组件内部的 render方法 , 会触发页面的
  二次渲染  虚拟DOM 会根据react 的 diff  算法  得到新的虚拟DOM 最后的批量的更新    

  state  之前 Vue 里面的 data

*/

import {MyBtn} from "./MyBtn"
var timer = null 
export class State1 extends Component{
  
  constructor(){
    super()
    // 构造器本身 
    this.state = {
        count:1000,
        text:"2107-daydayup",
        num:0
    }
  }

  // 原型
  state = {
    show:true,
    count:2000,
    text:"wh2107-- 转介绍嗯... "
  }

  handleChange=()=>{
    this.setState({
      count:++this.state.count
    },()=>{
      console.log("state 修改了... ")
    })
  }
  changeText=(e)=>{
    this.setState({
      text:e.target.value
    })
  }
  startCountDown=()=>{
    if(!timer){
      timer = setInterval(()=>{
        this.setState({
          num:++this.state.num
        })
      },1000)
    }
  }
  stopCountDown=()=>{
     if(timer){
       clearInterval(timer)
       timer = null 
     }
  }
  render(){
    console.log(this)
    console.log(this.state)

    // 死循环
    // this.setState({
    //   count:++this.state.count
    // },()=>{
    //   console.log("state 修改了... ")
    // })

    const {word} = this.props;
    const {count,text,num} = this.state; 
     return (
      <div>
        <h2>state 状态  </h2>
        <h4>react 组件数据交互的载体  状态用来修改的</h4>
        <h4>props - word = {word}</h4>
        <h4 onClick={this.handleChange} > count === {count}</h4>
        <p>
          <input type="text" value={text} onChange={this.changeText}/>
        </p>
        <h1>num === {num}</h1>
        <p>
        <MyBtn text="开始计数" onClick={this.startCountDown} style={{background:'#ff00ff',margin:20}}></MyBtn>
        <MyBtn text="暂停计数"  onClick={this.stopCountDown} style={{background:'#ababab'}} ></MyBtn>

        </p>
      </div>
    )
  }
}